<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">
        新建商品房需求预测
      </div>
      <div class="back-page-btn" @click="router.go(-1)">返回上一页</div>
    </div>
    <div class="main-content">
      <div class="module-title">新建商品房销售走势分析</div>
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="module-item every-city-new-commodity-house-transcation-value">
            <div class="module-item-title">
              <span>各城市新建商品房交易价格</span>
            </div>
            <div class="module-item-content">
              <month-range-time-filtrate-public class="filtrate-month-range"
                                                :month-range="everyCityNewCommodityHouseTranscationValueData.monthRange"
                                                @changeFiltrateTime="changeMonthRange($event, 'everyCityNewCommodityHouseTranscationValue')"/>
              <boxplot-public
                v-if="everyCityNewCommodityHouseTranscationValueData.xAxisData?.length"
                ref="everyCityNewCommodityHouseTranscationValueRef"
                :boxplot-data="everyCityNewCommodityHouseTranscationValueData"
                class="h293"
                @click="fullSc('boxPlotPublic', everyCityNewCommodityHouseTranscationValueData)"
              ></boxplot-public>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item every-city-new-commodity-house-sales-area">
            <div class="module-item-title">
              <span>各城市新建商品房销售面积</span>
              <el-tabs class="module-item-chart-tabs"
                       v-model="tabConfig.everyCityNewCommodityHouseSalesAreaTab"
                       @tab-change="changeTab($event, 'everyCityNewCommodityHouseSalesAreaTab')">
                <el-tab-pane v-for="(item, index) of chartTabList" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <month-range-time-filtrate-public class="filtrate-month-range"
                                                :month-range="everyCityNewCommodityHouseSalesAreaData.monthRange"
                                                @changeFiltrateTime="changeMonthRange($event, 'everyCityNewCommodityHouseSalesArea')"/>
              <bar-superposition
                v-if="everyCityNewCommodityHouseSalesAreaData.xAxisData?.length"
                ref="everyCityNewCommodityHouseSalesAreaRef"
                :bar-data="everyCityNewCommodityHouseSalesAreaData"
                class="h293"
                @click="fullSc('barSuperposition', everyCityNewCommodityHouseSalesAreaData)"
              ></bar-superposition>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item new-commodity-house-sales-area">
            <div class="module-item-title">
              <span>新建商品房销售面积</span>
              <el-tabs class="module-item-chart-tabs"
                       v-model="tabConfig.newCommodityHouseSalesAreaTab"
                       @tab-change="changeTab($event, 'newCommodityHouseSalesAreaTab')">
                <el-tab-pane v-for="(item, index) of chartTabList" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <public-change-province-city :cityList="mapList" :currentCity="newCommodityHouseSalesAreaData.cityCode"
                                           @changeCity="(event) => changeCity(event, 'newCommodityHouseSalesArea')"></public-change-province-city>
              <multiple-line
                v-if="newCommodityHouseSalesAreaData.xAxisData?.length"
                ref="newCommodityHouseSalesAreaRef"
                :line-data="newCommodityHouseSalesAreaData"
                class="h293"
                @click="fullSc('multipleLine', newCommodityHouseSalesAreaData)"
              ></multiple-line>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="main-content-middle">
        <div class="main-content-middle-title">热销商品房分析</div>
        <div class="main-content-middle-content">
          <div class="main-content-middle-content__item hot-selling-commodity-house-analysis"
               v-for="(item, index) of hotSellingCommodityHouseAnalysisData" style="position: relative"
               :key="index">
            <public-change-province-city v-if="index === 0" :cityList="mapList" :currentCity="item.cityCode"
                                         @changeCity="(event) => changeCity(event, 'hotSellingCommodityHouseAnalysis', index)"></public-change-province-city>
            <month-range-time-filtrate-public v-if="index === 0" class="filtrate-month-range" :month-range="item.monthRange"
                                              @changeFiltrateTime="changeMonthRange($event, index)"/>
            <pie
              v-if="item.seriesData?.length"
              :ref="(el) => handleSetPieDomRef(el, index)"
              :pieData="item"
              class="h220 chart"
              @click="fullSc('pie', item)"
            ></pie>
          </div>
        </div>
      </div>
      <div class="bottom-module-title">新建商品房供应分析</div>
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="module-item every-city-new-commodity-house-inventory-area">
            <div class="module-item-title">
              <span>各城市新建商品房库存面积</span>
            </div>
            <div class="module-item-content">
              <month-range-time-filtrate-public class="filtrate-month-range"
                                                :month-range="everyCityNewCommodityHouseInventoryAreaData.monthRange"
                                                @changeFiltrateTime="changeMonthRange($event, 'everyCityNewCommodityHouseInventoryArea')"/>
              <single-bar
                v-if="everyCityNewCommodityHouseInventoryAreaData.xAxisData?.length"
                ref="everyCityNewCommodityHouseInventoryAreaRef"
                :bar-data="everyCityNewCommodityHouseInventoryAreaData"
                class="h250"
                @click="fullSc('singleBar', everyCityNewCommodityHouseInventoryAreaData)"
              ></single-bar>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item new-commodity-house-sale-cycle-analysis">
            <div class="module-item-title">
              <span>新建商品房需求预测</span>
            </div>
            <div class="module-item-content">
              <public-change-province-city :cityList="mapList"
                                           :currentCity="newCommodityHouseDemandForecastData.cityCode"
                                           @changeCity="(event) => changeCity(event, 'newCommodityHouseDemandForecast')"></public-change-province-city>
              <double-line-with-mark-area
                v-if="newCommodityHouseDemandForecastData.xAxisData?.length"
                ref="newCommodityHouseDemandForecastRef"
                :line-data="newCommodityHouseDemandForecastData"
                class="h250"
                @click="fullSc('doubleLineWithMarkArea', newCommodityHouseDemandForecastData)"
              ></double-line-with-mark-area>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item future-demand-forecast">
            <div class="module-item-title">
              <span>未来需求预测</span>
            </div>
            <div class="module-item-content">
              <public-change-province-city v-if="false" :cityList="mapList" :currentCity="futureDemandForecastData.cityCode"
                                           @changeCity="(event) => changeCity(event, 'futureDemandForecast')"></public-change-province-city>
              <single-bar-line
                v-if="futureDemandForecastData.xAxisData?.length"
                ref="futureDemandForecastRef"
                :bar-line-data="futureDemandForecastData"
                class="h250"
                @click="fullSc('singleBarLine', futureDemandForecastData)"
              ></single-bar-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="magnifyData.dialogVisible" :title="magnifyData.dialogTitle" :width="magnifyData.dialogWidth"
               :top="magnifyData.dialogTop" center>
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{fontSizeTimes: 2}"
        v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import boxPlotPublic from '@/components/newCommodityHouseDemandForecast/boxplotPublic.vue'
import barSuperposition from "@/components/newCommodityHouseDemandForecast/barSuperposition.vue";
import multipleLine from "@/components/newCommodityHouseDemandForecast/multipleLine.vue";
import pie from '@/components/newCommodityHouseDemandForecast/pie.vue';
import multipleLineWithMarkArea from "@/components/newCommodityHouseDemandForecast/multipleLineWithMarkArea.vue";
import singleBar from "@/components/newCommodityHouseDemandForecast/singleBar.vue";
import doubleLineWithMarkArea from "@/components/newCommodityHouseDemandForecast/doubleLineWithMarkArea.vue";
import singleBarLine from "@/components/newCommodityHouseDemandForecast/singleBarLine.vue";

export default {
  components: {
    boxPlotPublic,
    barSuperposition,
    multipleLine,
    pie,
    multipleLineWithMarkArea,
    singleBar,
    doubleLineWithMarkArea,
    singleBarLine
  },
};
</script>
<script setup>
import {onMounted, ref} from "vue";

import {useRouter} from "vue-router";

import publicChangeProvinceCity from "@/components/newCommodityHouseDemandForecast/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/newCommodityHouseDemandForecast/timeFiltratePublic.vue";

import {
  getDefaultType, // 新建商品房需求预测
  getNewSaleArea, // 各城市新建商品房销售面积
  getNewSaleAreaByCode, // 新建商品房销售面积
  getHotHouse, // 热销商品房分析
  getNewHousePrice, // 各城市新建商品房交易价格
  getFutureForecast, // 未来需求预测
  getKcArea, // 各城市新建商品房库存面积
  getSelectNumberForecast, // 新建商品房需求预测
} from "@/api/newCommodityHouseDemandForecast/index";

const router = useRouter();

const cityObj = ref({
  name: '',
  code: '210000'
}) // 地图-城市code信息
const mapList = ref([
  {name: '辽宁省', code: '210000'},
  {name: '沈阳市', code: '210100'},
  {name: '大连市', code: '210200'},
  {name: '鞍山市', code: '210300'},
  {name: '抚顺市', code: '210400'},
  {name: '本溪市', code: '210500'},
  {name: '丹东市', code: '210600'},
  {name: '锦州市', code: '210700'},
  {name: '营口市', code: '210800'},
  {name: '阜新市', code: '210900'},
  {name: '辽阳市', code: '211000'},
  {name: '盘锦市', code: '211100'},
  {name: '铁岭市', code: '211200'},
  {name: '朝阳市', code: '211300'},
  {name: '葫芦岛市', code: '211400'},
  {name: '沈抚新区', code: '211500'}
])

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  dialogTitle: '',
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: ''
})
const dialogRef = ref(null) // chart图放大-domref

const tabConfig = ref({ // tabs-model
  everyCityNewCommodityHouseSalesAreaTab: 1, // 各城市新建商品房销售面积-title-tab
  newCommodityHouseSalesAreaTab: 1, // 新建商品房销售面积-title-tab
})

const chartTabList = ref([ // chart-tab-list
  {
    value: 1,
    label: '户型',
    list: []
  },
  {
    value: 2,
    label: '房型',
    list: []
  },
  {
    value: 3,
    label: '面积区间',
    list: []
  },
  {
    value: 4,
    label: '价格区间',
    list: []
  },
])

const everyCityNewCommodityHouseTranscationValueData = ref({ // 各城市新建商品房交易价格-data
  xAxisData: [],
  seriesData: [],
  dialogTitle: '各城市新建商品房交易价格',
  monthRange: []
})
const everyCityNewCommodityHouseTranscationValueRef = ref(null) // 各城市新建商品房交易价格-domref

const everyCityNewCommodityHouseSalesAreaData = ref({ // 各城市新建商品房销售面积-data
  legendData: [],
  xAxisData: [],
  barData: [],
  dialogTitle: '各城市新建商品房销售面积',
  monthRange: []
})
const everyCityNewCommodityHouseSalesAreaRef = ref(null) // 各城市新建商品房销售面积-domref

const newCommodityHouseSalesAreaData = ref({ // 新建商品房销售面积-data
  legendData: [],
  xAxisData: [],
  seriesData: [],
  dialogTitle: '新建商品房销售面积',
  cityCode: cityObj.value.code
})
const newCommodityHouseSalesAreaRef = ref(null) // 新建商品房销售面积-domref

const hotSellingCommodityHouseAnalysisData = ref([ // 热销商品房分析-data
  {
    seriesData: [],
    cityCode: cityObj.value.code,
    domRef: ref(null),
    monthRange: [],
    dialogTitle: '热销商品房分析-户型',
    titleName: '户型'
  },
  {
    seriesData: [],
    cityCode: cityObj.value.code,
    domRef: ref(null),
    dialogTitle: '热销商品房分析-房型',
    titleName: '房型'
  },
  {
    seriesData: [],
    cityCode: cityObj.value.code,
    domRef: ref(null),
    dialogTitle: '热销商品房分析-面积区间',
    titleName: '面积区间'
  },
  {
    seriesData: [],
    cityCode: cityObj.value.code,
    domRef: ref(null),
    dialogTitle: '热销商品房分析-价格区间',
    titleName: '价格区间'
  },
])
const hotSellingCommodityHouseAnalysisRef = ref({});

const everyCityNewCommodityHouseInventoryAreaData = ref({ // 各城市新建商品房库存面积-data
  xAxisData: [],
  barData: [],
  dialogTitle: '各城市新建商品房库存面积',
  monthRange: [],
  tooltipLabel: '库存面积'
})
const everyCityNewCommodityHouseInventoryAreaRef = ref(null) // 各城市新建商品房库存面积-domref

const newCommodityHouseDemandForecastData = ref({ // 新建商品房需求预测-data
  legendData: ['商品房销售面积', '商品房库存面积'],
  xAxisData: [],
  lineData: [],
  dialogTitle: '新建商品房需求预测',
  forecastIndex: 0,
  cityCode: cityObj.value.code,
  dataZoomStartValue: 0
})
const newCommodityHouseDemandForecastRef = ref(null) // 新建商品房需求预测-domref

const newCommodityHouseSalesInventoryForecastData = ref({ // 新建商品房销售及库存预测-data
  legendData: ['销售面积', '库存面积'],
  xAxisData: [],
  seriesData: [],
  dialogTitle: '新建商品房销售及库存预测',
  forecastIndex: 0,
  cityCode: cityObj.value.code
})
const newCommodityHouseSalesInventoryForecastRef = ref(null) // 新建商品房销售及库存预测-domref

const futureDemandForecastData = ref({ // 未来需求预测-data
  legendData: ['建筑面积', '土地面积'],
  xAxisData: [],
  barData: [],
  lineData: [],
  dialogTitle: '未来需求预测',
  tooltipLabelArr: ['建筑面积', '土地面积']
})
const futureDemandForecastRef = ref(null) // 未来需求预测-domref

const handleSetPieDomRef = (el, index) => {
  if (el) {
    hotSellingCommodityHouseAnalysisRef.value[`pieDomRef${index}`] = el;
  }
}

const changeTab = (event, module) => { // 公共-tabs切换
  switch (module) {
    case 'everyCityNewCommodityHouseSalesAreaTab': // 各城市新建商品房销售面积-tab
      getEveryCityNewCommodityHouseSalesAreaData()
      break;
    case 'newCommodityHouseSalesAreaTab': // 新建商品房销售面积-tab
      getNewCommodityHouseSalesAreaData()
      break;
  }
}

const changeCity = (cityCode, type, index) => { // 模块切换城市
  switch (type) {
    case 'newCommodityHouseSalesArea': // 新建商品房销售面积
      newCommodityHouseSalesAreaData.value.cityCode = cityCode
      getNewCommodityHouseSalesAreaData()
      break;
    case 'hotSellingCommodityHouseAnalysis': // 热销商品房分析
      hotSellingCommodityHouseAnalysisData.value[index].cityCode = cityCode
      getHotSellingCommodityHouseAnalysisData1()
      getHotSellingCommodityHouseAnalysisData2()
      getHotSellingCommodityHouseAnalysisData4()
      getHotSellingCommodityHouseAnalysisData3()
      break;
    case 'newCommodityHouseDemandForecast': // 新建商品房需求预测&未来需求预测
      newCommodityHouseDemandForecastData.value.cityCode = cityCode
      getNewCommodityHouseDemandForecastData() // 新建商品房需求预测
      getFutureDemandForecastData() // 未来需求预测
      break;
  }
}

const changeMonthRange = (value, whichOne) => { // 切换月范围
  switch (whichOne) {
    case 0: // pie图的时间筛选
      hotSellingCommodityHouseAnalysisData.value[whichOne].monthRange = value
      getHotSellingCommodityHouseAnalysisData1()
      getHotSellingCommodityHouseAnalysisData2()
      getHotSellingCommodityHouseAnalysisData3()
      getHotSellingCommodityHouseAnalysisData4()
      break;
    case 'everyCityNewCommodityHouseTranscationValue': // 各城市新建商品房交易价格-时间筛选
      everyCityNewCommodityHouseTranscationValueData.value.monthRange = value
      getEveryCityNewCommodityHouseTranscationValueData()
      break;
    case 'everyCityNewCommodityHouseSalesArea': // 各城市新建商品房销售面积-时间筛选
      everyCityNewCommodityHouseSalesAreaData.value.monthRange = value
      getEveryCityNewCommodityHouseSalesAreaData()
      break;
    case 'everyCityNewCommodityHouseInventoryArea': // 各城市新建商品房库存面积-时间筛选
      everyCityNewCommodityHouseInventoryAreaData.value.monthRange = value
      getEveryCityNewCommodityHouseInventoryAreaData()
      break;
  }
}

const getEveryCityNewCommodityHouseTranscationValueData = () => { // 各城市新建商品房交易价格-getdata
  getNewHousePrice({
    startTime: everyCityNewCommodityHouseTranscationValueData.value.monthRange[0],
    endTime: everyCityNewCommodityHouseTranscationValueData.value.monthRange[1]
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      everyCityNewCommodityHouseTranscationValueData.value.xAxisData = resData.nameList
      everyCityNewCommodityHouseTranscationValueData.value.seriesData = resData.valueList
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (everyCityNewCommodityHouseTranscationValueRef.value) {
      everyCityNewCommodityHouseTranscationValueRef.value.updateChart();
    }
  })
}

const getEveryCityNewCommodityHouseSalesAreaData = () => { // 各城市新建商品房销售面积-getdata
  everyCityNewCommodityHouseSalesAreaData.value.legendData = chartTabList.value.find(x => x.value === tabConfig.value.everyCityNewCommodityHouseSalesAreaTab)?.list
  getNewSaleArea({
    requestType: tabConfig.value.everyCityNewCommodityHouseSalesAreaTab,
    startTime: everyCityNewCommodityHouseSalesAreaData.value.monthRange[0],
    endTime: everyCityNewCommodityHouseSalesAreaData.value.monthRange[1]
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      everyCityNewCommodityHouseSalesAreaData.value.xAxisData = resData?.regionNameList
      everyCityNewCommodityHouseSalesAreaData.value.barData = everyCityNewCommodityHouseSalesAreaData.value.legendData.map((x, i) => {
        return resData?.[`valueList${i}`]
      })
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (everyCityNewCommodityHouseSalesAreaRef.value) {
      everyCityNewCommodityHouseSalesAreaRef.value.updateChart();
    }
  })
}

const getNewCommodityHouseSalesAreaData = () => { // 新建商品房销售面积-getdata
  newCommodityHouseSalesAreaData.value.legendData = chartTabList.value.find(x => x.value === tabConfig.value.newCommodityHouseSalesAreaTab)?.list
  getNewSaleAreaByCode({
    adcode: newCommodityHouseSalesAreaData.value.cityCode,
    requestType: tabConfig.value.newCommodityHouseSalesAreaTab
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      newCommodityHouseSalesAreaData.value.xAxisData = resData?.dateList
      newCommodityHouseSalesAreaData.value.seriesData = newCommodityHouseSalesAreaData.value.legendData.map((x, i) => {
        return resData?.[`valueList${i}`]
      })
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (newCommodityHouseSalesAreaRef.value) {
      newCommodityHouseSalesAreaRef.value.updateChart();
    }
  })
}

const getHotSellingCommodityHouseAnalysisData1 = () => { // 热销商品房分析-getdata-pie1
  getHotHouse({
    adcode: hotSellingCommodityHouseAnalysisData.value[0].cityCode,
    requestType: 1,
    startTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[0],
    endTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[1]
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      hotSellingCommodityHouseAnalysisData.value[0].seriesData = resData.map(x => {
        return {
          name: x.type,
          value: x.ts,
          percentage: x.zb
        }
      })
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (hotSellingCommodityHouseAnalysisRef.value['pieDomRef0']) {
      hotSellingCommodityHouseAnalysisRef.value['pieDomRef0'].updateChart();
    }
  })
}

const getHotSellingCommodityHouseAnalysisData2 = () => { // 热销商品房分析-getdata-pie2
  getHotHouse({
    adcode: hotSellingCommodityHouseAnalysisData.value[0].cityCode,
    requestType: 2,
    startTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[0],
    endTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[1]
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      hotSellingCommodityHouseAnalysisData.value[1].seriesData = resData.map(x => {
        return {
          name: x.type,
          value: x.ts,
          percentage: x.zb
        }
      })
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (hotSellingCommodityHouseAnalysisRef.value['pieDomRef1']) {
      hotSellingCommodityHouseAnalysisRef.value['pieDomRef1'].updateChart();
    }
  })
}

const getHotSellingCommodityHouseAnalysisData3 = () => { // 热销商品房分析-getdata-pie3
  getHotHouse({
    adcode: hotSellingCommodityHouseAnalysisData.value[0].cityCode,
    requestType: 3,
    startTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[0],
    endTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[1]
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      hotSellingCommodityHouseAnalysisData.value[2].seriesData = resData.map(x => {
        return {
          name: x.type,
          value: x.ts,
          percentage: x.zb
        }
      })
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (hotSellingCommodityHouseAnalysisRef.value['pieDomRef2']) {
      hotSellingCommodityHouseAnalysisRef.value['pieDomRef2'].updateChart();
    }
  })
}

const getHotSellingCommodityHouseAnalysisData4 = () => { // 热销商品房分析-getdata-pie4
  getHotHouse({
    adcode: hotSellingCommodityHouseAnalysisData.value[0].cityCode,
    requestType: 4,
    startTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[0],
    endTime: hotSellingCommodityHouseAnalysisData.value[0].monthRange[1]
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      hotSellingCommodityHouseAnalysisData.value[3].seriesData = resData.map(x => {
        return {
          name: x.type,
          value: x.ts,
          percentage: x.zb
        }
      })
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (hotSellingCommodityHouseAnalysisRef.value['pieDomRef3']) {
      hotSellingCommodityHouseAnalysisRef.value['pieDomRef3'].updateChart();
    }
  })
}

const getEveryCityNewCommodityHouseInventoryAreaData = () => { // 各城市新建商品房库存面积-getdata
  getKcArea({
    startTime: everyCityNewCommodityHouseInventoryAreaData.value.monthRange[0],
    endTime: everyCityNewCommodityHouseInventoryAreaData.value.monthRange[1]
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      everyCityNewCommodityHouseInventoryAreaData.value.xAxisData = resData.nameList
      everyCityNewCommodityHouseInventoryAreaData.value.barData = resData.areaList
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (everyCityNewCommodityHouseInventoryAreaRef.value) {
      everyCityNewCommodityHouseInventoryAreaRef.value.updateChart();
    }
  })
}

const getNewCommodityHouseDemandForecastData = () => { // 新建商品房需求预测-getdata
  getSelectNumberForecast({
    xzqhdm: newCommodityHouseDemandForecastData.value.cityCode,
    forecastType: 1
  }).then(res => {
    const resData = res && res.data
    if (resData) {
      newCommodityHouseDemandForecastData.value.xAxisData = resData.x
      newCommodityHouseDemandForecastData.value.lineData = [resData.y, resData.y1]
      newCommodityHouseDemandForecastData.value.forecastIndex = resData.x?.length - resData.qhzq
      newCommodityHouseDemandForecastData.value.dataZoomStartValue = resData.x?.findIndex(x => x === '2024-05')
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (newCommodityHouseDemandForecastRef.value) {
      newCommodityHouseDemandForecastRef.value.updateChart();
    }
  })
}

const getNewCommodityHouseSalesInventoryForecastData = () => { // 新建商品房销售及库存预测-getdata
  newCommodityHouseSalesInventoryForecastData.value.xAxisData = ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9', '2024-10', '2024-11', '2024-12', '2025-1', '2025-2', '2025-3']
  newCommodityHouseSalesInventoryForecastData.value.seriesData = [
    [1000, 2000, 5000, 3000, 2500, 3500, 2300, 1500, 6000, 5500, 7000, 8000, 4000, 5000, 4500],
    [2000, 3000, 4000, 2000, 1500, 3500, 2200, 1400, 5000, 4500, 8000, 7000, 2000, 1000, 3200],
  ]
  newCommodityHouseSalesInventoryForecastData.value.forecastIndex = newCommodityHouseSalesInventoryForecastData.value.xAxisData.findIndex(x => x === '2024-9')
  if (newCommodityHouseSalesInventoryForecastRef.value) {
    newCommodityHouseSalesInventoryForecastRef.value.updateChart();
  }
}

const getFutureDemandForecastData = () => { // 未来需求预测-getdata
  getFutureForecast({
    adcode: newCommodityHouseDemandForecastData.value.cityCode,
  }).then(res => {
    const resData = res && res.data
    futureDemandForecastData.value.barData = []
    futureDemandForecastData.value.lineData = []
    if (resData) {
      futureDemandForecastData.value.xAxisData = resData?.monthList
      futureDemandForecastData.value.barData = resData.areaList
      resData.areaList?.forEach(x => {
        futureDemandForecastData.value.lineData.push((x/5).toFixed(3))
      })
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (futureDemandForecastRef.value) {
      futureDemandForecastRef.value.updateChart();
    }
  })
}

const initPage = () => {
  getEveryCityNewCommodityHouseTranscationValueData() // 各城市新建商品房交易价格
  getEveryCityNewCommodityHouseSalesAreaData() // 各城市新建商品房销售面积
  getNewCommodityHouseSalesAreaData() // 新建商品房销售面积

  getHotSellingCommodityHouseAnalysisData1() // 热销商品房分析1
  getHotSellingCommodityHouseAnalysisData2() // 热销商品房分析2
  getHotSellingCommodityHouseAnalysisData3() // 热销商品房分析3
  getHotSellingCommodityHouseAnalysisData4() // 热销商品房分析4

  getEveryCityNewCommodityHouseInventoryAreaData() // 各城市新建商品房库存面积
  getNewCommodityHouseDemandForecastData() // 新建商品房需求预测
  // getNewCommodityHouseSalesInventoryForecastData() // 新建商品房销售及库存预测
  getFutureDemandForecastData() // 未来需求预测
}

const getTabDataList = () => { // 获取户型&房型&面积&价格面积list
  return new Promise((resolve, reject) => {
    getDefaultType().then(res => {
      const resData = res && res.data
      if (resData) {
        chartTabList.value[0].list = resData?.hxList
        chartTabList.value[1].list = resData?.fxList
        chartTabList.value[2].list = resData?.mjList
        chartTabList.value[3].list = resData?.priceList
        resolve()
      } else {
        reject()
      }
    }).catch(err => {
      console.log(err);
      reject()
    })
  })
}

const fullSc = (componentName, componentParams) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.dialogTitle = componentParams.dialogTitle;
  switch (componentName) {
    case 'boxPlotPublic': // 盒须图
      magnifyData.value.props = {
        boxplotData: componentParams,
        class: 'h293 dialog-h293'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barSuperposition': // 重叠柱状图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h293 dialog-h293'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'multipleLine': // 折线图
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h293 dialog-h293'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'pie': // 饼图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h220 dialog-h220'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'singleBar': // 单独柱形图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h250 dialog-h250'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'doubleLineWithMarkArea': // 双折线图
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h250 dialog-h250'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'singleBarLine': // 柱&折现图
      magnifyData.value.props = {
        barLineData: componentParams,
        class: 'h250 dialog-h250'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
}

onMounted(async () => {
  const date = new Date()
  const tempDate = [`${date.getFullYear()}-01`, `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? '' : 0}${date.getMonth() + 1}`]
  hotSellingCommodityHouseAnalysisData.value[0].monthRange = tempDate // 热销商品房分析-时间筛选
  everyCityNewCommodityHouseTranscationValueData.value.monthRange = tempDate // 各城市新建商品房交易价格-时间筛选
  everyCityNewCommodityHouseSalesAreaData.value.monthRange = tempDate // 各城市新建商品房销售面积-时间筛选
  everyCityNewCommodityHouseInventoryAreaData.value.monthRange = tempDate // 各城市新建商品房库存面积-时间筛选

  await getTabDataList() // 获取户型&房型&面积&价格面积list

  initPage();
})

</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 35px;
      color: #A6EDFF;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .back-page-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;

    .every-city-new-commodity-house-transcation-value,
    .every-city-new-commodity-house-sales-area,
    .new-commodity-house-sales-area {
      height: 313px;
    }

    .every-city-new-commodity-house-inventory-area,
    .new-commodity-house-sale-cycle-analysis,
    .future-demand-forecast {
      height: 270px;
    }

    .module-title {
      font-size: 24px;
      margin: 0 0 20px 20px;
    }

    .module-item {
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 20px;
        }

        &-tabs {
          position: absolute;
          right: 50px;
        }
      }

      &-content {
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;

        .filtrate-month-range {
          position: absolute;
          top: 10px;
          right: 15px;
          width: 200px;
          z-index: 1;
        }
      }
    }

    &-middle {
      margin-top: 20px;
      background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
      background-size: 100% 100%;
      position: relative;
      height: 220px;

      &-title {
        position: absolute;
        left: 20px;
        top: 15px;
        font-size: 18px;
      }

      &-content {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;

        &__item {
          width: 25%;

          .chart {
            margin-top: 40px;
            height: 180px;
          }

          .filtrate-city {
            top: 15px;
          }

          .filtrate-month-range {
            position: absolute;
            top: 15px;
            right: 95px;
            width: 200px;
            z-index: 1;
          }
        }
      }
    }

    .bottom-module-title {
      font-size: 24px;
      margin: 20px 0 20px 20px;
    }
  }
}

:deep(.el-tabs) {
  display: flex;
  align-items: center;

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__nav-wrap:after {
    height: 0;
  }

  .el-tabs__active-bar {
    height: 0;
  }

  .el-tabs__item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px !important;
    font-size: 12px;
    height: 20px;
    cursor: pointer;
    color: white;
    background: rgb(9, 31, 63);
  }

  .el-tabs__item.is-active {
    background: #2187F4;
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__header {
    padding-right: 0;

    .el-dialog__title {
      font-size: 30px;
      color: white;
    }
  }

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>